<template>
	<!-- 退费确认弹窗：课程退费、商品退费、订金退费 -->
	<div class="refundpopup_confirm">
		<el-dialog 
			 v-if="parentData.show"
			:title="parentData.title"
			:visible.sync="parentData.show"
			:close-on-click-modal="false"
			:modal-append-to-body="false"
			:modal="false"
			element-loading-background="rgba(0, 0, 0, 0.1)">
			<div class="row">
				<div class="txtbox">
					<span class="label">学员姓名：</span>
					<span class="value">{{parentData.studentInfo.studentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系人：</span>
					<span class="value">{{parentData.studentInfo.parentName}}</span>
				</div>
				<div class="txtbox">
					<span class="label">联系电话：</span>
					<span class="value">{{parentData.studentInfo.phone}}</span>
				</div>
			</div>
			<div class="row table">
				<div class="table" style="width:100%;">
					<template >
						<el-table
							:data="parentData.tableResult.table.tbody"
							border
							style="width: 100%;font-size:0.16rem;">
							<el-table-column 
								align="center"
								prop="courseName"
								label="名称">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="chargeMode"
								label="收费模式">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="payModeName"
								label="收款方式">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="courseBuyNum"
								label="购买数量">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="courseTimeMode"
								label="单位">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="simpleprice"
								label="课程单价">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="courseMoney"
								label="课程总价">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="realMoney"
								label="实际支付">
							</el-table-column>
							<el-table-column 
								align="center"
								prop="useCourseHour"
								label="已上课时">
							</el-table-column>
							<el-table-column 
								v-if="parentData.courseType!=2"
								align="center"
								prop="useCourseMoney"
								label="课耗">
							</el-table-column>
							<el-table-column 
								v-else
								align="center"
								prop="useCourseMoney"
								label="课耗">
								<template><span>--</span></template>
							</el-table-column>
							<el-table-column 
								align="center"
								prop="surplusCourseHour"
								label="剩余课时">
							</el-table-column>
							<el-table-column 
								v-if="parentData.courseType!=2"
								align="center"
								prop="surplusCourseMoney"
								label="剩余课程费用">
							</el-table-column>
							<el-table-column 
								v-else
								align="center"
								prop="surplusCourseMoney"
								label="剩余课程费用">
								<template><span>--</span></template>
							</el-table-column>
							<el-table-column 
								v-if="parentData.courseType!=2"
								align="center"
								prop="needRefundMoney"
								label="应退费">
							</el-table-column>
							<el-table-column 
								v-else
								align="center"
								width="150"
								label="应退费">
								<template slot-scope="scope">
									<el-input-number class="refund_alterMoney" v-model="scope.row.needRefundMoney" :precision="2" style="width: 1.2rem;"
					  				  :min="0" :max="scope.row.courseMoney" :controls="false"></el-input-number>
								</template>
							</el-table-column>
							<el-table-column label="实际退款"  width="150" align="center">
								<template slot-scope="scope">
									<el-input-number v-if="parentData.courseType!=2" class="refund_alterMoney" v-model="scope.row.relMoney" :precision="2" style="width: 1.2rem;" @change="relmoneyChange"
					  				  :min="0" :max="scope.row.maxMoney" :controls="false"></el-input-number>
									<el-input-number v-else class="refund_alterMoney" v-model="scope.row.relMoney" :precision="2" style="width: 1.2rem;" @change="relmoneyChange"
					  				  :min="0" :max="scope.row.courseMoney" :controls="false"></el-input-number>
								</template>
							</el-table-column>
							
						</el-table>
					</template>
				</div>
				<div class="statisticsBox">
					<span>{{parentData.tableResult.summarize}}</span>
				</div>
			</div>
			<div class="row">
				<span class="labeltxt">实际退费：</span>
				<el-input disabled class="input_actural" ref="actrulMoney" v-model="parentData.actrulMoney"></el-input>
			</div>
			<div class="row" :v-if="parentData.reasonShow">
				<span class="labeltxt">退款原因：</span>
			</div>
			<div class="row" style="margin: 0;" :v-if="parentData.reasonShow">
				<el-input class="input_reason"
				  ref="reasonText"
				  type="textarea"
				  placeholder="请输入退款原因"
				  v-model="parentData.reasonTxt"
				>

				</el-input>
			</div>
			<div class="row">
				<span class="labeltxt">退款方式：</span>
				<el-radio-group class="refundMethodRadio" v-model="parentData.refundMethodRadio">
					<el-radio disabled label="100">原路返回</el-radio>
					<el-radio :disabled="parentData.refundMethodRadio=='100'" label="2">现金</el-radio>
					<el-radio :disabled="parentData.refundMethodRadio=='100'" label="1">银联转账</el-radio>
					<el-radio :disabled="parentData.refundMethodRadio=='100'" label="5">POS机</el-radio>
				</el-radio-group>
			</div>
			<div class="row">
				<span class="labeltxt" style="color: red;">*</span>
				<span class="labeltxt">收款人信息：</span>
			</div>
			<div class="row"  style="margin: 0;">
				<el-input class="input_name" ref="input_name" placeholder="收款人姓名" v-model="parentData.rName"></el-input>
				<el-input class="input_phone" ref="input_phone" placeholder="收款人联系方式" v-model="parentData.rPhone"></el-input>
			</div>
			<div class="row button">
				<el-button class="cancel resetElement" type="primary" @click="cancel">上一步</el-button>
				<el-button class="ok resetElement" type="primary" @click="confirm">确定退费</el-button>
			</div>
		</el-dialog>
		<refundpopup_result :refundpopup_result="this.refundpopup_result" ></refundpopup_result>
	</div>
</template>

<script>
	import refundpopup_result from './refundpopup_result'
	let vm;
	export default{
		components:{refundpopup_result},
		props:['refundpopup_confirm'],
		data(){
			return {
				parentData:this.refundpopup_confirm,
				refundpopup_result:{
					title:'退费办理成功',
					show:false,
					studentInfo:{
						studentName:'',
						parentName:'',
						phone:'',
						payee:'',
						payeePhone:''
					},
					tableResult:{
						table:{
							tbody:[],
							thead:[]
						}
					},
					shouldRefund:'',
					actualRefund:'',
					alterByUser:true,

				}
			}
		},
		methods:{
			/**初始化*/
			init(data){
			},
			updateByData(data){
				this.parentData=data;
			},
			/**接口获取数据 */
			api_getDataByParam(param){

			},
			cancel(){
				// console.log(this.parentData)
				this.parentData.show=false;
				this.$emit('back');
			},
			confirm(){
				//参数校验
				let actrulMoney = this.$refs.actrulMoney;//实际退款
				let reasonText = this.$refs.reasonText;//退款原因
				let input_name = this.$refs.input_name;//收款人			
				let input_phone =this.$refs.input_phone;//收款人电话
				let rules=[];
				
				//实际退款金额验证
				if(actrulMoney){	
					
					// rules.push({
					// 		judge : tool.judge("integer",actrulMoney.value),
					// 		focus : actrulMoney,
					// 		tips : "请输入正整数金额"
					// });	
					if(actrulMoney.value>this.totalmoney){
						rules.push({
							judge : null,
							focus : actrulMoney,
							tips : "退费金额过大"
						});	
					}
				}
				//退款原因验证
				if(reasonText){	
					
					 let len = reasonText.value.length||0;					 
					 if(len>50){
					 	 rules.push({
							judge : "",
							focus : reasonText,
							tips : "不得超过50个字符"
						});	
					 }
				}
                //收款人
                if(input_name){					
					 rules.push({
							judge : tool.judge("name",input_name.value),
							focus : input_name,
							tips : tips.name
					});				  
				}
                //收款人电话
                if(input_phone){					
					 rules.push({
							judge : tool.judge("phone",input_phone.value),
							focus : input_phone,
							tips : tips.phone
					});				  
				}
                if(!tool.validate(rules)) {
	            	
					return;
				}
				//退课参数
				let paras={
					studentId:this.parentData.studentInfo.studentId,
					refundMode:'1',
					payeeName:this.parentData.rName,
					payeeTel:this.parentData.rPhone,
					payMode:this.parentData.refundMethodRadio,
					relMoney:this.parentData.actrulMoney,
					remark:this.parentData.reasonTxt,
					orderRefundCourseEntityList:[]
				};
				// console.log(this.parentData.refundMethodRadio);return;
				let courseInfo=this.parentData.tableResult.table.tbody;
				for(let i=0;i<courseInfo.length;i++){
					
					paras.orderRefundCourseEntityList.push({
						studentCourseId:courseInfo[i].studentCourseId,
						classStudentId:courseInfo[i].classId||"",
						className:courseInfo[i].className,
						chargeModeName:courseInfo[i].chargeMode,
						buyHour:courseInfo[i].courseBuyNum,//courseHour
						courseOnePrice:courseInfo[i].simpleprice,
						courseTotalPrice:courseInfo[i].courseMoney,
						// realPayMoney:courseInfo[i].realMoney,
						useClassHour:courseInfo[i].useCourseHour,
						useMoney:courseInfo[i].useCourseMoney,
						surplusClassHour:courseInfo[i].surplusCourseHour,
						surplusMoney:courseInfo[i].surplusCourseMoney,
						refundMeoey:courseInfo[i].needRefundMoney,
						courseId:courseInfo[i].courseId,
						realPayMoney:courseInfo[i].relMoney
					})					
				}
				// console.log(paras)
				// console.log(courseInfo)
			    //退款操作
			    api.refund(paras).then(function(data){
					// console.log(data)
					if(data.result="操作成功"){
						//退款方式处理
						for(let i=0;i<vm.parentData.tableResult.table.thead.length;i++){
							if(vm.parentData.tableResult.table.thead[i].propName=='payMode'){
								vm.parentData.tableResult.table.thead[i].labelNmae='退款方式';
								let del=vm.parentData.tableResult.table.thead.splice(i,1);
								vm.parentData.tableResult.table.thead.push(del[0]);
								break;
							}
						};
						if(vm.parentData.refundMethodRadio=='2'){
							vm.parentData.tableResult.table.tbody.forEach(element => {
								element['payMode']='现金';
							});
						}else if(vm.parentData.refundMethodRadio=='1'){
							vm.parentData.tableResult.table.tbody.forEach(element => {
								element['payMode']='银联转账';
							});
						}

						vm.parentData.show=false;
						vm.refundpopup_result.show=true;
						vm.refundpopup_result.tableResult=vm.parentData.tableResult;
						vm.refundpopup_result.studentInfo=vm.parentData.studentInfo;
						vm.refundpopup_result.studentInfo=vm.parentData.studentInfo;
						vm.refundpopup_result.studentInfo.payee=vm.parentData.rName;
						vm.refundpopup_result.studentInfo.payeePhone=vm.parentData.rPhone;
						vm.refundpopup_result.shouldRefund=vm.totalmoney;	
						vm.refundpopup_result.actualRefund=vm.parentData.actrulMoney;
						vm.$parent.refreshData();
					}
				})
			},
			relmoneyChange(d){
				let actrulMoney=0;
				vm.parentData.tableResult.table.tbody.forEach(element => {
					actrulMoney+=Number(element['relMoney']);
				});
				if(actrulMoney>this.totalmoney&&vm.parentData.courseType!=2){
					this.$message({
						type:'warning',
						message:'退费金额过大！'
					});
					return;
				}
				this.parentData.actrulMoney=parseFloat(actrulMoney.toFixed(2));
			}
		},
		computed:{
			
			totalmoney:function(){
				
				let sum = 0;
				let courseInfo=this.parentData.tableResult.table.tbody;

				for(let i =0;i<courseInfo.length;i++){
					sum+=courseInfo[i].needRefundMoney;
				}
				
				return sum;
			}
		},
		created : function() {
			vm=this;
		}
	}
</script>

<style lang="scss">		
	.refundpopup_confirm{
		padding: 0 0.34rem 0.2rem 0.34rem;
		font-size: 0.16rem;
		.row{
			width: 100%;
			display: flex;
    		margin-top: 0.1rem;
			.title{
				font-size: 0.16rem;
				margin-bottom: 0.05rem;
			}
			.labeltxt{
				line-height: 0.36rem;
			}
			.refundMethodRadio{
				// height: 0.16rem;
				.el-radio{
					line-height: 0.36rem !important;
					.el-radio__label{
						font-size: 0.16rem !important;
					}
				}
			}
			.otherinfo{
			}
			.txtbox{
				width: 22%;
				.label{

				}
				.value{

				}
			}
			.table{
				.el-table{
					// max-height: 5.5rem !important;
					// .el-table__body-wrapper{
					// 	max-height: 3.02rem !important;
					// }
				}
			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				margin-top: 0.05rem;
			}
			.input_actural{
			}
			.input_reason{
				font-size: 0.16rem !important;
			}
			.input_name{
			}
			.input_phone{
				margin-left: 0.1rem;
			}
			.input_actural,.input_name,.input_phone{
				width: 2rem;
				.el-input__inner{
					border-radius: 0.08rem !important;
					font-size: 0.16rem !important;
					height: 0.36rem !important;
					line-height: 0.36rem !important;
				}
			}
		}
		.row.table{
			flex-wrap: wrap;
		}
		.row.button{
			justify-content: center;
			.ok{
				margin-left: 1rem;
			}
		}
		.refund_alterMoney{
			.el-input{
				font-size: 0.16rem !important;
			}
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
		.realMoneyRow{
			// .el-input__inner{
			// 	padding: 0 !important;
			// }
		}
	}
</style>